<template>
	<div class="easyd-weixin-Box">

		<div class="app_page_box" style="bottom: 50px;">
			<div class="app_page">
				
				<div class="app_list_box MARGIN_BOTTOM_10">
					<mt-picker :slots="slots" value-key="l_name" ref="picker2" @change="onValuesChange"></mt-picker>
				</div>
				<div class="app_list_box MARGIN_BOTTOM_10">
					<div class="app_box_content">
						<div class="app_box_content_left">
							详细地址
						</div>
						<div class="app_box_content_right">
							<input type="text" id="" placeholder="请输入详细地址" v-model="addrData" value="" />
						</div>
					</div>
				</div>
				
			</div>
		</div>
        <div class="app_bottom_box" @click="submit()">
            <div class="app_bottom_box_right">
            	确定
            </div>
        </div>

	</div>
</template>

<script>
	import { mapState, mapMutations } from "vuex";
	export default {

		data() {
			return {
				slots: [
			        {
			          flex: 1,
			          values: [],
			          className: 'slot1',
          defaultIndex: 0,
			          textAlign: ''
			        }, {
			          divider: true,
			          content: '-',
			          className: 'slot2'
			        }, {
			          flex: 1,
			          values: [],
			          className: 'slot3',
			          textAlign: ''
			        }, {
			          divider: true,
			          content: '-',
			          className: 'slot4'
			        }, {
			          flex: 1,
			          values: [],
			          className: 'slot5',
			          textAlign: ''
			        }
			    ],
			    selectLocation : [],
			    newLocation : [],
			    addrData : '',
			};
		},
		computed: {
			...mapState({
				 locationArr: state => state.LocationModule.locationArr,
				 shengData: state => state.LocationModule.sheng,
				 shiData: state => state.LocationModule.shi,
				 quData: state => state.LocationModule.qu,
				 addrDatas: state => state.LocationModule.addr,
				 locationId: state => state.LocationModule.locationId,
			})
		},
		mounted() {
			this.initData();
			this.addrData = this.addrDatas;
		},
		methods: {

			//  ...mapMutations(["ShopIndexModule/updateIsShopGuide"]),
            initData() {
                this.$http.getHttp(
                    this.$API.getLocation,
                    rs => {
//                      this.$store.commit("LocationModule/updateLocationArrData", rs.data);
                        this.newLocation = this.$common.locationOrganizationalStructure(rs.data);
                        this.slots[0].values = this.newLocation;
                        this.slots[2].values = this.newLocation[0].children;
                        this.slots[4].values = this.newLocation[0].children[0].children;
                        
			        	if(this.locationId != undefined && this.locationId != null && this.locationId != ''){
			        		var newLocationId = JSON.parse(this.locationId);
			        		this.slots[0].defaultIndex = newLocationId[0];
			        		this.slots[2].defaultIndex = newLocationId[1];
			        		this.slots[4].defaultIndex = newLocationId[2];
			        	}else{
			        		//默认到陕西西安
				        	this.slots[0].defaultIndex = 24;
			        	}
			        	
                    }
                );
            },
			onValuesChange(picker, values) {
				if(!values[0]){
		    		picker.setSlotValues(1, values[0].children);
	        		picker.setSlotValues(2, values[0].children[0].children);
        		}else{
	               picker.setSlotValues(1, values[0].children);
	               let town = [];
	               if(values[1]){
                	town = values[1].children;
	               }
	               picker.setSlotValues(2,town);
        		}
        		
        		this.selectLocation = values;
//      		
		    },
		    submit(){
		    	
		    	this.$store.commit("LocationModule/updateShengData", this.selectLocation[0]);
                this.$store.commit("LocationModule/updateShiData", this.selectLocation[1]);
                this.$store.commit("LocationModule/updateQuData", this.selectLocation[2]);
                
        		console.log(this.shengData.l_name);
        		console.log(this.shiData.l_name);
        		console.log(this.quData.l_name);
        		console.log(this.addrData);
              
        		var txt = this.shengData.l_name + this.shiData.l_name + this.quData.l_name + this.addrData;
        		var locationIdArr = [this.selectLocation[0].indexs,this.selectLocation[1].indexs,this.selectLocation[2].indexs];
        		console.log(txt);
        		console.log(this.selectLocation);
        		console.log(locationIdArr);
        		
                this.$store.commit("LocationModule/updateAddrData", this.addrData);
                this.$store.commit("LocationModule/updateTxtData", txt);
                this.$store.commit("LocationModule/updateLocationId", locationIdArr);
        		
        		history.go(-1);
        		
		    }
		}
	};
</script>

<style lang="stylus" scoped>
	@import '~PUBLIC_CSS';
	.history_follow_info {
		padding: 10px;
		border-bottom: 1px solid #f1f1f1;
	}
	
	.history_follow_info .app_box_content_textarea {
		padding: 0;
		position: relative;
	}
	
	.history_follow_info .app_box_content_textarea textarea {
		background: #F4F4F4;
		padding: 10px;
	}
	
	.history_follow_info .app_box_content_textarea span{
		position: absolute;
		right: 1px;
		bottom: 1px;
		font-size: small;
		color: #999;
		background: #f4f4f4;
		padding: 5px;
	}
	
</style>